<!doctype html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>测试</title>
	<style type="text/css">
		*{ padding:0; margin:0; list-style:none; border:0;}
		.all{
		  width:500px;
		  height:200px;
		  padding:7px;
		  border:1px solid #ccc;
		  margin:100px auto;
		  position:relative;
		}
		.screen{
			width:500px;
			height:200px;
			 overflow:hidden; 
			position:relative;
		}
		.screen li{ width:500px; height:200px; overflow:hidden; float:left;}
		.screen ul{ position:absolute; left:0; top:0px; width:3000px;}
		.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
		.all ol li{ float:left; width:20px; height:20px; background:#fff; border:1px solid #ccc; margin-left:10px; cursor:pointer;}
		.all ol li.current{ background:yellow;}

		/*#arr {display: none;}*/
		#arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
		#arr #right{right:5px; left:auto;}
		#word {
			position:absolute;
			left:0;
			bottom:0;
			width:260px;
			height:40px;
			background:#CCC;
			line-height:40px;
			color:#333;
		}
	</style>


</head>

<body>
<div class="all" id='all'>
	<div class="screen" id="screen">
        <ul id="ul">
            <li><img src="images/1.jpg" width="500" height="200" /></li>
            <li><img src="images/2.jpg" width="500" height="200" /></li>
            <li><img src="images/3.jpg" width="500" height="200" /></li>
            <li><img src="images/4.jpg" width="500" height="200" /></li>
            <li><img src="images/5.jpg" width="500" height="200" /></li>
        </ul>
        <ol>
			<li class="current">1</li>
			<li class="">2</li>
			<li class="">3</li>
			<li class="">4</li>
			<li class="">5</li>
        </ol>
        <div id="arr"><span id="left"><</span><span id="right">></span></div>
    </div>
</div>
</body>
</html>


        